JS - element properties - children

revision:

returns an HTMLCollection of an element's child elements.

top

It returns a collection of an element's child elements (HTMLCollection object).

Syntax:

element.children : the collection of element nodes; the elements are sorted as they appear in the document.

property value:

none :

example

tagnames of DIV's children are :

number of elements in DIV :

code: 
                <div>
                    <p>tagnames of DIV's children are : <span id="prop1"></span></p>
                    <p>number of elements in DIV : <span id="prop2"></span></p>
                </div>
                <script>
                    const collection = document.getElementById("DIV").children;
                    let text2 = "";
                    for (let i = 0; i < collection.length; i++) {
                        text2 += collection[i].tagName + " , ";
                    }
                    document.getElementById("prop1").innerHTML = text2;
                    let count = document.getElementById("DIV").children.length;
                   document.getElementById("prop2").innerHTML = count;
                </script>

Click "Change" to change the background of all child elements of DIV1.

I am a h3 element

I am a div element
I am a span element 
            <div id="DIV1" > 
                <p>Click "Change" to change the background of all child elements of DIV1.</p>
                <button onclick="firstFunction()">Change</button>
                <h3>I am a h3 element</h3>
                <div>I am a div element</div>
                <span>I am a span element</span>
            </div>
            <script>
                function firstFunction() {
                    const collection = document.getElementById("DIV1").children;
                    for (let i = 0; i < collection.length; i++) {
                        collection[i].style.backgroundColor = "red";
                    }
                }
            </script>